<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column prop="ID" align="center" label="序号">
    </el-table-column>
    <el-table-column prop="NAME" align="center" label="姓名"  >
      <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <P>姓名：{{scope.row.NAME}}</P>
                  <P>工号/证件号：{{scope.row.CODE}}</P>
                  <p>部门：{{scope.row.DEPARTMENT_NAME}}</p>
                  <p>性别：{{scope.row.GENDER}}</p>
                  <p>年龄：{{scope.row.AGE}}</p>
                  <p>教师类型：{{scope.row.TEACHER_TYPE}}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{scope.row.NAME}}</el-tag>
                  </div>
                </el-popover>
              </template>
    </el-table-column>
    <el-table-column prop="DEPARTMENT_NAME" align="center" label="部门"  >
    </el-table-column>
    <el-table-column prop="EXPERIENCE_VALUE" align="center" label="经验值"  >
    </el-table-column>
  </el-table>
</template>

<script>
import { getTop10ExperiencedTeachers } from '@/api/dashboard'

export default {
  data() {
    return {
      list: null
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    getTop10ExperiencedTeachers().then(response => {
      this.list = response.result
    }).catch(error => {
      console.log(error)
      this.$message.error('获取教师经验值失败')
    })
  },
  methods: {

  }
}
</script>
